<template>
  <div class="margin-column">
    <up-row class="mid-row">
      <up-col span="10">
        <view class="title">
          <view class="zh">{{ zh_text }}</view>
          <view class="en">{{ en_text }}</view>
        </view>
      </up-col>

      <up-col span="2" @tap="handleRightText">
        <view class="right" :class="{ 'scale-animation': isClicked }">{{ rightText }}</view>
      </up-col>
    </up-row>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from 'vue'
const emits = defineEmits(['handleRightText'])

const props = defineProps({
  zh_text: {
    type: String,
    default: ''
  },
  en_text: {
    type: String,
    default: ''
  },
  rightText: {
    type: String,
    default: ''
  },
  open_type: {
    type: String,
    default: '1'
  },
  official_account_article_url: {
    type: String,
    default: ''
  },


})


const isClicked = ref(false)

const handleRightText = () => {
  if (props.rightText != '' && props.rightText != undefined) {
    isClicked.value = true; // 触发动画
    if (props.open_type == '1') {
      setTimeout(() => {
        isClicked.value = false; // 动画结束后恢复
        emits('handleRightText')
      }, 200); // 动画持续时间
    } else {
      uni.navigateTo({
        url:`/pages/web/index?url=${props.official_account_article_url}&title=${props.zh_text}`
      })
    }

  }
}

</script>

<style lang="scss" scoped>
$midHeight: 120rpx;
$index-title-font-size: 20rpx;

.margin-column {
  // margin: 26rpx 0;
}

.mid-row {
  font-size: $index-title-font-size;

  >view {
    height: $midHeight;
    line-height: $midHeight;
  }
}

.left {
  text-align: left;
  font-family: 'American Typewriter';
  font-size: 24rpx;
}

.mid {
  font-size: 30rpx;
  font-weight: 500;
  text-align: center;
}

.right {
  transition: transform 0.1s ease;
  font-size: 24rpx;
  text-align: right;
  padding-top: 30rpx;
}

.scale-animation {
  transform: scale(0.85);
  /* 缩小 5% */
}
</style>
